// 项目js入口文件
console.log('ok')

import './css/index.css'
import './css/index.scss'
// 注意： 如果要通过路径的形式引入 node_modules 相关的文件，可以直接省略
// node_modules 这一层目录，直接写包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这层目录，默认就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'

// class 关键字，是ES6种提供的新语法，是用来实现 ES6 中面向对象编程的方式
class Person {
    // 使用 static 关键字可以定义静态属性
    // 静态属性，就是可以直接通过类名，直接访问的属性
    // 实例属性，只能通过类的实例访问的属性，叫做实例属性
    static info = { name: 'zs', age: 20 }
}

// 访问 Person 类身上的 info 静态属性
console.log(Person.info)
//---------------------------------------------------------------------------------------
// 在 webpack 中，默认只能处理一部分 ES6 的新语法，一些高级的 ES6 或者 ES7 语法，
// webpack 是处理不了的，这时候，就需要 借助于第三方的 loader，来帮助webpack处理
// 这些高级的语法，当第三方 loader 把高级语法转为 低级的语法之后，会把结果交给
// webpack 去打包到 bundle.js 中
// 通过 Babel 可以帮我们将 高级的语法 转化为 低级的语法

// 1. 在 webpack 中，可以运行如下两套命令，安装两套包，去安装 Babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个新的匹配规则：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2.1 注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 中所有的第三方JS文件，
// 都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢
// 2.2.2 哪怕，最终，babel 把所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
// 3. 在项目的根目录中新建一个叫做 .babelrc 的配置文件，这个配置文件属于JSON格式，
//    所以，在写 .babelrc 配置的时候必须符合JSON语法规范：不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置：大家可以把 presets 翻译成语法的意思
        // {
        //    "presets": ["env", "stage-0"],
        //    "plugins": ["transform-runtime"] 
        // }
// 4. 了解：目前，我们安装的 babel-preset-env，是比较新的ES语法，之前，我们安装的是
//    babel-preset-es2015，现在，出了一个更新的语法插件，叫做 babel-preset-env，它
//    包含了 所有的和es***相关的语法
//---------------------------------------------------------------------------------------

// Java C# 实现面向对象的方式完全一样了，class 是从后端语言中借鉴过来的，来实现面向对象
// var p1 = new Person()

// function Animal(name) {
//     this.name = name
// }
// Animal.info = 123

// var a1 = new Animal('小花')

// // 这是静态属性
// // console.log(Animal.info)
// // 这是实例属性
// console.log(a1.name)